<template>
  <div class="source-wrap scene-edit-box">
		  <ClassifyTree @handleNodeClick="handleNodeClick"></ClassifyTree>
		  
		  <div class="top-title">
			<span>场景列表（*选择底板创建场景）</span>
			<div>
				<input type="text"  v-model="keywords" placeholder="请输入名称检索" @keydown="handleSearch"/>
			</div> 
		  </div>
		  
		  <div class="source-box">
			<div class="list-wrap">
				<div class="float scroll min" style="height: 100%;">
					<el-scrollbar>
						<ul class="card-ul">
						  <li v-for=" project in tableData">
							  <div class="top">
									<img  :src="project.url"/>
									<div class="img-mask">
										<div class="opear">
											<p @click="handleToEdit(project)">编辑场景</p>
											<span class="menu-col-group">
												<span class="menu-col">
													<el-icon class="icon" @click="handleToPreview(project)"><View /></el-icon>
													<span class="hidden">预览</span>
												</span>
												
												<span class="menu-col">
													<el-icon class="icon" @click="handleToCopy(project)"><DocumentCopy /></el-icon>
													<span class="hidden">复制</span>
												</span>
												
												<span class="menu-col">
													<el-icon class="icon" @click="editDialogRef.openDialog(project,'edit')"><Rank /></el-icon>
													<span class="hidden">调整</span>
												</span>
												<span class="menu-col">
													<el-icon class="icon" @click="handleDelete(project)"><Delete /></el-icon>
													<span class="hidden" >删除</span>
												</span>
												<span class="menu-col">
													<el-icon class="icon"  @click="handleToAPITester(project)"><WarnTriangleFilled /></el-icon>
													<span class="hidden">调试</span>
												</span>
<!-- 												<span class="menu-col" v-show="project.isLock=='1'">
													<el-icon class="icon" @click="handleLock(project)"><Lock /></el-icon>
													<span class="hidden">解锁</span>
												</span>
												<span class="menu-col" v-show="project.isLock=='0'">
													<el-icon class="icon" @click="handleLock(project)"><Unlock /></el-icon>
													<span class="hidden">锁定</span>
												</span> -->
											</span>
										</div>
									</div>
							  </div>
							  <div class="bottom">
								  <span>{{project.name}}</span>
							  </div>
						  </li>
						</ul>
					</el-scrollbar>
				</div>
				<div class="list-paging-box" v-show="_totalPage>1">
					<el-pagination small background layout="prev, pager, next" :page-size="_pageSize" :total="_total" @current-change="currentChange" />
				</div>
			</div>  
		  </div>
		<EditDialog  ref="editDialogRef" @closeDialog="closed"></EditDialog>
  </div>
  
</template>
<script lang="ts" setup>
	import { useRouter } from 'vue-router'
 	import {
	  Rank,Delete,View,Lock,Unlock,WarnTriangleFilled,DocumentCopy
	} from '@element-plus/icons-vue' 
	import ClassifyTree from "./components/ClassifyTree.vue";
	import EditDialog from "./components/EditDialog.vue";
	
	import { listForScene,deleteForScene,saveForScene,copyForScene} from "@/api/scene";
	import { ref } from 'vue'
	const router = useRouter()
	const keywords=ref('');
	const classifyId=ref('');
	const tableData=ref([]);
	const loading = ref(false);
	const editDialogRef=ref();
	
	const _cur=ref(1);
	const _total=ref(0);
	const _totalPage=ref(0);
	const _pageSize=ref(20);
	
	const currentChange=(cur:number)=>{
		_cur.value= cur;
		load();
	}
	
	const load=()=>{
		loading.value=true;
		listForScene({
			cur:_cur.value,
			classifyId:classifyId.value?classifyId.value:'-1',
			keywords:keywords.value,
			limit:_pageSize.value
		})
		.then(({result}) => {
			 const _data=result
			_data.list.forEach(item => {
			  item['url']=import.meta.env.VITE_APP_BASE_API+'/api/v1/thumbnail/'+item.id+"?"+ new Date().getTime()
			})
			_total.value=_data.totalRow
			_totalPage.value=_data.totalPage
			tableData.value= _data.list
		})
		.catch((e) => {
		})
		.finally(() => {
			loading.value=false;
		});
	}
	
	const handleNodeClick=(node)=>{
		classifyId.value=node.id;
		load();
	}
	
	const handleSearch=(e)=>{
		if(e.keyCode == 13) {
			load();
		}
	}
	
	const closed=(e)=>{
		keywords.value='';
		classifyId.value=e.classifyId;
		load();
	}
	
	const handleLock=(row:object)=>{
		loading.value=true;
		saveForScene({
			id:row.id,
			isLock:row.isLock=='0'?'1':'0',
			classifyId:row.classifyId
		})
		.then((res) => {
			classifyId.value=row.classifyId;
			load();
			ElMessage.success(res.message);
		})
		.catch((e) => {
		})
		.finally(() => {
			loading.value=false;
		});
	}
	
	const handleToCopy=(row:any)=>{
		
		loading.value=true;
		copyForScene({
			id:row.id,
		})
		.then((res) => {
			classifyId.value=row.classifyId;
			load();
			ElMessage.success(res.message);
		})
		.catch((e) => {
		})
		.finally(() => {
			loading.value=false;
		});
		
		
	}
	
	const handleDelete=(row :object)=>{
		ElMessageBox.confirm("确认删除["+row.name+"]场景吗?", "警告", {
		  confirmButtonText: "确定",
		  cancelButtonText: "取消",
		  type: "warning",
		})
		  .then(() => {
			  loading.value=true;
			  deleteForScene({
			  	id:row.id
			  })
			  .then(() => {
				keywords.value='';
				classifyId.value=row.classifyId;
				load();
				ElMessage.success("删除成功");
			  })
			  .catch((e) => {
			  })
			  .finally(() => {
			  	loading.value=false;
			  });
		  })
		  .catch(() => ElMessage.info("已取消删除"));
	}
	const handleToAPITester=(row:any)=>{
		router.push({ path: '/apiTester', query: { id:row.id,name:row.name}})
	}
	const handleToPreview=(row:any)=>{
		console.log(row)
		router.push({ path: '/preview', query: { id:row.id,name:row.name}})
	}
	const handleToEdit=(row:any)=>{
		router.push({ path: '/editor', query: { id:row.id,name:row.name}})
	}
	onMounted(() => {
		load();
	});
</script>
<style scoped>
</style>